<template>
    <div ref="echartsDiv" style="height: 100%;width: 100%;"></div>
</template>
<script lang="ts" setup>
import * as echarts from 'echarts'
import { nextTick, onMounted, onUnmounted, ref } from 'vue';

interface Props {
    xAxis?: string[],
    yAxis?: string[],
    type: string,
    data: Array<number>
}
const { xAxis, yAxis, type, data } = defineProps<Props>()

const echartsDiv = ref(null)
let chartInstance: any = null

onMounted(async () => {
    await nextTick()
    chartInstance = echarts.init(echartsDiv.value)
    const option = {
        title: {
            text: ''
        },
        tooltip: {},
        xAxis: {
            data: xAxis
        },
        yAxis: {
            data: yAxis
        },
        series: {
            name: '',
            type,
            data
        },
        grid: {
            left: '10%',
            top: '10%',
            bottom: '15%',
            right: '10%'
        }

    }
    chartInstance.setOption(option)
})

onUnmounted(() => {
    if (chartInstance !== null && chartInstance.dispose) {
        chartInstance.dispose()
    }
})
</script>